<template>
  <section class="main huise">
    <div class="minebody">
      <div class="minetop">
        <div class="mineset">
          <span>设置</span>
          <van-icon name="setting" size="0.36rem" color="#fff" />
        </div>
        <div class="mineuser" v-if="token">
          <div class="sculpture">
            <img src="https://img2.ch999img.com/newstatic/1381/d43534a496b0c8.png.webp" alt />
          </div>
          <div class="nologine">
            <a class="mineusername">{{username}}</a>
            <span>普通VIP</span>
          </div>
        </div>
        <div class="mineuser" v-else-if="!token">
          <div class="sculpture">
            <img src="http://img2.ch999img.com/newstatic/2048/014ce31b7846786e.png.webp" alt />
          </div>
          <div class="nologin">
            <a href="./#/login" class="minelogin">登录</a>
            <span>|</span>
            <a href="./#/reg" class="mine reg">注册</a>
          </div>
        </div>
        <div class="property">
          <li class="propertyitem">
            <p>0</p>
            <p>收藏商品</p>
          </li>
          <li class="propertyitem">
            <p>0</p>
            <p>浏览记录</p>
          </li>
          <li class="propertyitem">
            <p>0</p>
            <p>优惠券</p>
          </li>
          <li class="propertyitem">
            <p>0</p>
            <p>积分</p>
          </li>
        </div>
        <div class="bottom">
          <img src="https://img2.ch999img.com/newstatic/1381/015f7c3932841e40.jpg.webp" alt />
          <span>我实在是懒得写字了，就当我这里写了很多吧</span>
        </div>
      </div>
      <div class="minebox">
        <div class="orderbox">
          <span class="mineorder">我的订单</span>
          <a href="./#/order" class="moreorder">全部订单></a>
        </div>
        <div class="mineitembox">
          <li class="mineboxitem">
            <div>
              <van-icon name="coupon-o" size="0.5rem" />
            </div>
            <span>代付款</span>
          </li>
          <li class="mineboxitem">
            <div>
              <van-icon name="gift-o" size="0.5rem" />
            </div>
            <span>待收货</span>
          </li>
          <li class="mineboxitem">
            <div>
              <van-icon name="comment-o" size="0.5rem" />
            </div>
            <span>待评价</span>
          </li>
          <li class="mineboxitem">
            <div>
              <van-icon name="todo-list-o" size="0.5rem" />
            </div>
            <span>已完成</span>
          </li>
        </div>
      </div>
      <div class="mineaddress">
        <a href="./#/address">收货地址管理></a>
      </div>
      <div class="otherorder">
        <div class="otherbox">
          <span>其他订单</span>
        </div>
      </div>
      <div class="secede" @click="secede" v-if="token">
        <p>退出</p>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      token: false,
      username: ""
    };
  },
  methods: {
    secede() {
      sessionStorage.clear();
      location.reload()
    }
  },
  mounted() {
    if (window.sessionStorage.token) {
      // window.console.log(window.sessionStorage.token)
      this.username = window.sessionStorage.username;
      this.token = true;
    }
  }
};
</script>
<style >
.minetop {
  width: 100%;
  height: 5rem;
  background-image: url("https://img2.ch999img.com/newstatic/1379/01437aa24ec31145.jpg");
  background-size: 100%;
  border-radius: 0 0 14px 14px;
}
.mineset {
  width: 100%;
  height: 0.88rem;
  text-align: right;
  font-size: 0.28rem;
  color: #fff;
  line-height: 0.88rem;
  position: relative;
}
.mineset span {
  margin-right: 0.66rem;
}
.van-icon-setting {
  position: absolute;
  top: 0.26rem;
  right: 0.2rem;
}
.mineuser {
  width: 6.94rem;
  height: 1.46rem;
  margin-left: 0.4rem;
}
.sculpture {
  width: 1.46rem;
  height: 1.46rem;
  float: left;
}
.sculpture img {
  width: 1.46rem;
  height: 1.46rem;
  border: 4px solid #fff;
  border-radius: 100%;
}
.nologin {
  float: left;
  font-size: 0.28rem;
  color: #fff;
  margin-top: 0.6rem;
  margin-left: 0.4rem;
}
.nologin span {
  margin: 0.2rem;
}
.nologin a {
  color: #fff;
}
.mineusername {
  font-size: 0.44rem;
  font-weight: 900;
  margin-left: 0.6rem;
  color: #fff;
  vertical-align: top;
}
.nologine span {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  font-size: 0.24rem;
  text-align: center;
  color: #fff;
  width: 1.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  display: inline-block;
  margin-left: -0.8rem;
}
.property {
  font-size: 0.28rem;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 1.26rem;

  margin-left: 0.4rem;
}
.propertyitem {
  float: left;
  width: 1.72rem;
  margin-top: 0.4rem;
}
.bottom {
  width: 6.94rem;
  height: 1.28rem;
  background-image: url(https://img2.ch999img.com/newstatic/1379/0141136bce243dc3.jpg);
  background-size: 100%;
  border-radius: 10px 10px 0 0;
  margin-left: 0.3rem;
  margin-top: 0.12rem;
  font-size: 0.28rem;
  color: rgb(131, 88, 46);
}
.bottom img {
  width: 0.92rem;
  height: 0.92rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  display: inline-block;
}
.bottom span {
  vertical-align: top;
}
.huise {
  background: #f3f3f3;
  overflow-x: hidden;
}
.mineaddress {
  width: 6.94rem;
  font-size: 0.28rem;
  margin-left: 0.3rem;
  margin-top: 0.4rem;
  background: #fff;
  border-radius: 6px;
  font-weight: 900;
}
.minebox {
  width: 6.94rem;
  height: 2.28rem;
  font-size: 0.24rem;
  margin-left: 0.3rem;
  margin-top: 0.4rem;
  background: #fff;
  border-radius: 6px;
}
.otherbox,
.orderbox,
.mineaddress a {
  color: #000;
  width: 6.5rem;
  height: 0.6rem;
  line-height: 0.6rem;
  margin-left: 0.2rem;
}
.otherbox,
.mineorder {
  font-size: 0.28rem;
  font-weight: 900;
}
.moreorder {
  float: right;
  color: rgb(156, 156, 156);
}
.mineitembox {
  width: 6.5rem;
  margin-left: 0.2rem;
  margin-top: 0.4rem;
}
.mineboxitem {
  width: 1.6rem;
  height: 1.14rem;
  float: left;
  text-align: center;
}
.otherorder {
  width: 6.94rem;
  height: 4rem;
  background: #fff;
  margin-left: 0.28rem;
  border-radius: 6px;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}.secede{
  width: 6.94rem;
  height: 0.8rem;
  background: rgba(253, 76, 52, 0.932);
  color: #fff;
  margin-left: 0.28rem;
  border-radius: 6px;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.36rem
}
</style>